<script lang="ts" setup name="Father">
    import { ref } from 'vue';
    import Son from './Son.vue';

    let toy = ref('');

    // 当子组件中send-toy事件被触发时，就会调用到saveToy函数
    function saveToy(newToy: string): void {
        toy.value = newToy;
    }
</script>

<template>
    <div class="father">
        <h2>父组件</h2>
        <p v-show="toy">儿子的玩具：{{ toy }}</p>
        <!-- 自定义事件send-toy（@是v-on的缩写），有点类似于“订阅”。自定义事件推荐使用“kebab-case”（肉串）命名方式。 -->
        <Son @send-toy="saveToy"/>
    </div>
</template>

<style scoped>
    .father {
        background-color: gray;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 10px;
    }
</style>